{{define "/chat/chat.shtml"}}
<div v-show="win=='single'||win=='group'">
    <header class="mui-bar mui-bar-nav">
        <a class="mui-icon mui-icon-left-nav mui-pull-left" @tap="win='main'; curcate=0;"></a>
        <h1 class="mui-title" v-text="title" @tap="clearchathistory"></h1>
        <span class="mui-icon mui-icon-bars moreinfo-bar" @tap="moreinfo(curcate)"></span>
    </header>
    <div id="chat-background" style="position:fixed; left:0px; top:0px; width:100%; height:100%">
        <img :src="chatbackground" width="100%" height="100%" />
    </div>
    <div id="convo" data-from="Sonu Joshi" style="margin: 0px 0 60px 0; background-color: skyblue;">
        <a class="absolute-base center-msg" style="margin-top: 48px; z-index: 10;" @tap="getchathistory"
            id="chathistory" v-if="showchathistory">历史消息</a>
        <ul class="chat-thread absolute-base">
            <!--群聊且item.dstid=当前msgcontext.dstid
        <span v-text="JSON.stringify(msglist)"></span>
          -->
            <!--单聊且是他发的item.userid=msgcontext.dstid && 发给我的 item.dstid=myid 或者是我item.userid= myid发的,&&发给他的item.dstid= msgcontext.dstid 我发给他的  -->
            <li class="chat " :class="item.ismine?'mine':'other'" v-for="item in msglist"
                v-if="item.msg.cmd==msgcontext.cmd && (( item.msg.cmd==10 &&  (item.ismine? item.msg.dstid==msgcontext.dstid : item.msg.userid==msgcontext.dstid )) || ( item.msg.cmd==11 && (item.msg.dstid==msgcontext.dstid))) ">
                <div>
                    <img class="avatar" :src="item.user.avatar" @tap="openuserinfo(item.user.id)" />
                </div>
                <span></span>
                <div class="content">
                    <div v-if="item.msg.media==1" style="line-height: 30px;" v-text="item.msg.content"></div>
                    <img class="pic" v-if="item.msg.media==4" :src="item.msg.url" />
                    <div v-if="item.msg.media==3" @tap="playaudio(item.msg.url)">
                        <img class="audio" style="vertical-align: middle;" src="/asset/images/audiom.png" />
                        <span style="border: none;" v-text="item.msg.amount"></span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="flex-container">
        <div class="item-1" @tap="txtstat='audio'" v-if="txtstat=='kbord'">
            <img src="/asset/images/audio.png" />
        </div>
        <div class="item-1" @tap="txtstat='kbord'" v-if="txtstat=='audio'">
            <img src="/asset/images/kbord.png" />
        </div>
        <div class="item-2 mui-input-row" @keydown="keydownsendmsg('13', sendtxtmsg, txtmsg)" v-if="txtstat=='kbord'">
            <input placeholder="这里写点啥" class="text mui-input-clear" type="text" v-model="txtmsg" />
            <span class="mui-icon mui-icon-clear mui-hidden"></span>
        </div>
        <div class="item-2" v-if="txtstat=='audio'">
            <!-- 为移动端绑定touchstart -->
            <input value="按住说话" type="button" class="text input-audio" @touchstart="startrecorder()"
                @touchend="stoprecorder" v-if="isMobile()">
            </input>
            <!-- 为pc端绑定click -->
            <input value="按住说话" type="button" class="text input-audio" id='inputaudio' @click="clickgetaudio()"
                v-if="!isMobile()">
            </input>
        </div>
        <div class="item-3" @tap="panelstat='doutu'">
            <img src="/asset/images/smile.png" />
        </div>
        <div class="item-4" v-if="!txtmsg" @tap="panelstat='more'">
            <img src="/asset/images/more.png" />
        </div>
        <div class="item-4" v-if="!!txtmsg" @tap="sendtxtmsg(txtmsg)">
            <img src="/asset/images/send.png" />
        </div>
    </div>
    <div id="panels" style="display: flex">
        <div v-if="panelstat=='doutu'">
            <div class="doutures">
                <div @tap="sendpicmsg(item)" class="res" v-for="item in doutu.choosed.assets">
                    <img :class="doutu.choosed.size ||'small'" :src="item" />
                </div>
            </div>
            <div class="doutupkg">
                <div class="pkg" @tap="doutu.choosed=item" v-for="item in doutu.packages">
                    <img :class="item.size || 'small'" :src="item.icon" />
                </div>
            </div>
        </div>
        <div v-if="panelstat=='more'" class="plugins">
            <div class="plugin" @tap="dispatchplugin(item)" v-for="item in plugins">
                <img :src="item.icon" />
                <div v-html="item.slot"></div>
                <p v-text="item.name"></p>
            </div>
        </div>
    </div>
</div>
<audio id="audio" style="display: none"></audio>
<audio id="audio4play" style="display: none"></audio>
{{end}}